<template>
  <van-row gutter="10" class="address">
    <van-col span="24" style="margin: 10px 0">所在城市</van-col>
    <van-col
      span="8"
      v-for="item in list"
      :key="item.id"
      :style="{
        marginBottom: addressStyle.marginBottom + 'px',
        display: isShow,
      }"
    >
      <van-button plain type="info" block @click="handlyClickBtn(item)">{{
        item.provinceName
      }}</van-button>
    </van-col>
    <template v-for="item in cityList">
      <template v-for="citem in item.cityList">
        <van-col
          :key="citem.id"
          span="8"
          :style="{
            marginBottom: addressStyle.marginBottom + 'px',
          }"
        >
          <van-button plain type="info" block @click="handlyClickCity(citem)">{{
            citem.cityName
          }}</van-button>
        </van-col>
      </template>
    </template>
  </van-row>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  props: {
    list: {
      require: true,
      type: Array,
    },
    addressIsVisible: {
      require: true,
      type: Boolean,
    },
  },
  name: "addressListComp",
  data() {
    return {
      cityList: [],
      currentItem: {
        num: 1,
        content: "所在城市:",
      },
      addressStyle: {
        marginBottom: 10,
      },
    };
  },
  methods: {
    handlyClickBtn(item) {
      //console.log(item)
      this.cityList = this.list.filter((value) => value.id === item.id);
      //console.log(this.cityList[0].cityList);
      this.currentItem.content += `${item.provinceName}---`;
    },
    handlyClickCity(item) {
      //console.log(item);
      this.$emit("update:addressIsVisible", !this.addressIsVisible);
      this.currentItem.content += `${item.cityName}`;
      this["PUSTH_HISTORY"](this.currentItem);
    },
    ...mapMutations(["PUSTH_HISTORY"]),
  },
  computed: {
    isShow() {
      return this.cityList.length > 0 ? "none" : "block";
    },
  },
  watch: {},
  created() {},
  mounted() {},
};
</script>

<style scoped>
</style>